<extend name="common/base" />

<block name="resource">
    <link href="__ASSET__/Home/v4/src/css/explore.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
       .news-event-tilte{
          color:#282828;
       }
       .news-event-con{
          color:#646464;
       }
       .event-hot-list .right-item{
          transition:box-shadow 0.3s ease 0s;
       }
       .event-hot-list .right-item li:hover {
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       }
    </style>
</block>
<block name="content">
<div class="match-bg paddingtb20 match-desc-video">
    <include file="MatchV4/player_template" />
</div>
<div class="container paddingtb20 paddingb120">
    <!--热门比赛-->
    <div class="match-main-left white-bg left">
        <div class="main-right-box">
            <h1 class="font12 colorthree">
                <p class="h1-left left">
                   <span class="hot" title="热门赛事">
                        <i class="pre-icon"></i>
                        <b>{$match.subtitle}</b>
                    </span>
                </p>
                <p class="h1-right right">
                    <a href="/match-game-{$game.id}" class="colorthree">
                        <i class="event-icon" style="background: url('{$game.logo}');background-size: contain;"></i>
                        <span>{$game.name}&nbsp;&nbsp;赛事</span>
                    </a>
                </p>
            </h1>
            <notempty name="race_list">
                <div class="event-hot event-hot-list">
                    <!-- 循环比赛日期列表 begin -->
                    <volist name="race_list" id="races">
                    <div class="item-box">
                        <p class="item-box-title">{$races.date}</p>
                        <ul>
                            <!-- 循环比赛列表 begin -->
                            <volist name="races.list" id="race">
                                <include file="MatchV4/race_template" />
                            </volist>
                            <!-- 循环比赛列表 end -->
                        </ul>
                    </div>
                    </volist>
                    <!-- 循环比赛日期列表 end -->
                </div>
            <else/>
                <!--类null-state为空状态-->
                <div class="content-right-item-null match_races_nulll">
                    <div class="null-img1"></div>
                    <div class="null-info font16">暂时没有赛事</div>
                </div>
            </notempty>
        </div>
    </div>
    <!--赛事要闻-->
    <div class="match-main-right white-bg right">
        <h1 class="font12 colorthree">
            <span class="left">赛事要闻</span>
            <a href="/match-news-{$match.id}" class="colorthree right">更多</a>
        </h1>
        <notempty name="newslist">
            <ul class="news-event news-event-list">
                <!-- 循环赛事新闻 begin-->
                <volist name="newslist" id="news">
                    <include file="MatchV4/news_template" />
                </volist>
                <!-- 循环赛事新闻 end-->
            </ul>
        <else/>
            <!--类null-state为空状态-->
            <div class="match-main-right-null">
                <div class="null-img"></div>
                <div class="null-info font16 colornine font_micro">暂时没有赛事要闻</div>
            </div>
        </notempty>    
    </div>
</div>
</block>

<block name="component">
    <script src="__ASSET__/Home/v4/lib/js/date_format.js"></script>
    <script src="__ASSET__/Home/v4/lib/js/jquery.zclip.min.js"></script>
    <script src="__ASSET__/Home/v4/lib/js/jwplayer.js"></script>
    <script src="__ASSET__/Home/v4/dist/js/background.js"></script>
    <script src="__ASSET__/Home/v4/src/js/match_n.js"></script>
    <script>
        window._THIS = {
            detail_url : "{:U('api/match/detailNew', ['group_id' => $show_id['group_id']])}",
            detail_page :"/match-detail-",
            recentResult:"/match-ajaxRecent",
            VideoPlay:"{:C('LOCAL_DOMAIN')}/video-play-",
            bg_img : "{$match.pc_bg_detail}",
        }; 
        $(function(){
            $("img.lazy").lazyload({
                effect: "fadeIn",
                threshold :180,
                // event: "scrollstop"
            })
        })
    </script>
</block>